<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="../vue.js"></script>
</head>

<body>
  <div id="app">
    <!-- 差值语法 为什么找的到  -->
    <!-- <h1>{{msg}}</h1> -->
  </div>
</body>
<script>
  //实列化Vm 
  let vm = new Vue({
    //类型：string | Element
    // 限制：只在用 new 创建实例时生效。
    //提供一个在页面上已存在的 DOM 元素作为 Vue 实例的挂载目标。可以是 CSS 选择器，也可以是一个 HTMLElement 实例。
    // el: "#app",
    // el: document.getElementById('app'),
    // Vue 实例的数据对象 model 
    //类型：Object | Function
    // data: {
    //   msg: "hellow world",
    //   mb: "模板数据"
    // },
    //问题 为什么data是一个函数?
    /* 
    因为在组件化开发的时候，各组件可能会共享同一份数据
    然后采用函数式写法 返回一个对象 
    每次都会生成新的一个对象 并不会共享数据 个个独立
    */
    data() {
      return {
        msg: "hellow world",
        mb: "模板数据"
      }
    },
    //模板配置项 
    // 模板书写的位置有两个
    //       1. 直接书写在容器中(Vue会把容器的html作为模板, 生成虚拟DOM), Vue挂载前, 模板会暂时作为普通的html展示在浏览器中（验证定时器设置vm.$mount）
    //       2. 可以在配置项中书写template配置, 值是一个字符串格式, 书写html模板, 在挂载之前, 并不会展示在浏览器中
    template: `<h2>{{mb}}</h2>`
  })

  //选择挂载目标 可以自由选择挂载时机
  // vm.$mount( [elementOrSelector] )
  // vm.$mount("#app")
  // vm.$mount(document.getElementById('app'))
  setTimeout(() => {
    vm.$mount("#app")
  }, 2000)

  //Vue 实例使用的根 DOM 元素。
  // console.log("vm.$el", vm.$el);

</script>

</html>